<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>系统用户管理</title>
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layui/layuiAdmin/css/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card" >
    <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="border-radius: 0;border-top: 4px solid #d2d2d2;">
      <div class="layui-form-item">
        <div class="layui-inline">

          <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加课程</button>
        </div>
        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="text" name="courseName" placeholder="请输入课程名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-sysuser-front-search" style="margin-left: -15px;">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="layui-card-body">



      <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>

      <script type="text/html" id="table-useradmin-webuser">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>

    </div>
  </div>
</div>

<script src="../../layui/layui.js"></script>
<script type="text/javascript">
  layui.config({
    base: '../../layui/layuiAdmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['layer','table','form'], function(){
    var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,table = layui.table;

    //加载table
    table.render({
      elem: '#LAY-user-manage'
      ,url:'/sys_course/findSysCourseAll' //后端接口
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
      ,title: '课程数据表'
      ,cols: [[
        {field:'courseId',title:'ID',width: 80,align:'center'}
        ,{field:'courseName', title:'课程名称',width: 250,align:'center'}
        ,{field:'courseType', title:'课程类型',width: 170,align:'center'}
        ,{field:'courseTeacher', title:'任课教师',width: 150,align:'center'}
        ,{field:'place', title:'上课地点',width: 200,align:'center'}
        ,{field:'credit', title:'学分',width: 100,align:'center'}
        ,{fixed: 'right', title:'操作', toolbar: '#table-useradmin-webuser',width:300,align:'center'}
      ]]
      ,page: {
        curr: 1 //设定初始在第 5 页
        ,limit: 5 //设定初始每页显示 5 条
      },
      limits:[5,10,15,20]
    });

    //监听行工具事件
    table.on('tool(LAY-user-manage)', function(obj){
      var param = obj.data;
      console.log(param.data)
      console.log(param.courseId)
      if(obj.event === 'del'){
        layer.confirm('真的删除吗？', function(){
          $.ajax({
            url:"/sys_course/delete", //请求后端接口地址
            type:"post", //请求方式get | post
            data:{courseId:param.courseId}, //提交json字符串对象参数
            dataType:"json", //后端返回参数类型
            success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
              if(res.code == 0){//成功
                layer.msg(res.message);//弹出提示
                table.reload('LAY-user-manage'); //数据刷新
                layer.close(index); //关闭弹层
              }
              if(res.code == -1){//系统出问题
                layer.msg(res.message,{icon: 5});//弹出提示
              }
            }
          })
        });
      } else if(obj.event === 'edit'){
        layer.open({
          type: 2
          ,title: '修改课程信息'
          ,skin: 'layui-layer-molv'
          ,content: 'edit.html'
          ,maxmin: true
          ,area: ['480px', '400px']
          ,success: function (layero,index){
            var body = layer.getChildFrame("body",index);
            var contentWindow = layero.find('iframe')[0].contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
            body.find("input[name=courseId]").val(data.courseId);
            body.find("input[name=courseTeacher]").val(data.courseTeacher);
            body.find("input[name=place]").val(data.place);
            body.find("input[name=credit]").val(data.credit);

          }
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'LAY-user-front-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);
            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段
              console.log(field.courseId)
              $.ajax({
                url:"/sys_course/update", //请求后端接口地址
                type:"post", //请求方式get | post
                data:JSON.stringify(field), //提交json字符串对象参数
                contentType:"application/json;charset=utf-8", //发送信息至服务器时内容编码类型
                dataType:"json", //后端返回参数类型
                success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
                  if(res.code == 0){//成功
                    layer.msg(res.message);//弹出提示
                    table.reload('LAY-user-manage'); //数据刷新
                    layer.close(index); //关闭弹层
                  }
                  if(res.code == -1){//系统出问题
                    layer.msg(res.msg,{icon: 5});//弹出提示
                  }
                }
              })
            });
            submit.trigger('click');
          }
        });

      }
    });


    //监听搜索
    form.on('submit(LAY-sysuser-front-search)', function(data){
      var field = data.field;
      console.log(field);
      //执行重载
      table.reload('LAY-user-manage', {
        url: '/sys_course/search',
        where: field
      });
    });

    //事件
    var active = {
      add: function(){
        layer.open({
          type: 2
          ,title: '添加课程信息'
          ,skin: 'layui-layer-molv'
          ,content: 'add.html'
          ,maxmin: true
          ,area: ['480px', '420px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'LAY-user-front-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);
            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段
               console.log(field)
              // console.log(JSON.stringify(field)) // 将普通js对象转换为JSON字符串对象
              // {key:value,key:'value'} // 普通表单格式 -- js对象
              // {"key":value,"key":"value"} // json格式 -- json字符串对象
              // 提交给后端 -- ajax异步提交 -- jQuery -- 在线工具参考：https://tool.oschina.net/
              $.ajax({
                url:"/sys_course/save", //请求后端接口地址
                type:"post", //请求方式get | post
                data:JSON.stringify(field), //提交json字符串对象参数
                contentType:"application/json;charset=utf-8", //发送信息至服务器时内容编码类型
                dataType:"json", //后端返回参数类型
                success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
                  if(res.code == 0){//成功
                    layer.msg(res.message);//弹出提示
                    table.reload('LAY-user-manage'); //数据刷新
                    layer.close(index); //关闭弹层
                  }
                  if(res.code == -1){//系统出问题
                    layer.msg(res.message,{icon: 5});//弹出提示
                  }
                }
              })


            });
            submit.trigger('click');
          }
        });
      }
    };

    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>
</body>
</html>